<template>
  <div style="height: 100vh;">
    <div class="wrapper">
      <div class="content">
        <div class="category-top">
          <input type="text" placeholder="点击搜索标签" class="category-search">
        </div>
        <feature-view @imageLoad="imageLoad"/>
        <div class="category"><category-content-item /></div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

import categoryContentItem from './child_comps/category_content_item.vue'
import featureView from './child_comps/feature_view.vue'

export default {
  name: "category",
  components: {
    categoryContentItem,
    featureView
  },
  data() {
    return {
      scroll: null,
    }
  },
  // 组件挂载完之后
  mounted() {
    this.scroll = new BScroll(document.querySelector('.wrapper'), {
      probeType: 3,
      pullUpLoad: true,
      click: true
    })
  },
  methods: {
    imageLoad() {
      this.scroll.refresh();
    }
  }
}
</script>

<style scoped>
  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 49px;
    overflow: hidden;
  }

  .category-top {
    width: 100%;
    height: 56px;
    background-color: #d9d7d8;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .category-top .category-search {
    width: 360px;
    height: 32px;
    border: 2px solid #fff;
    border-radius: 16px;
    color: #888;
    font-size: 16px;
    text-align: center;
    background-color: white;
    cursor: pointer;
  }

  .category-top .category-search:focus {
    outline: none;
  }

  .category {
    padding: 20px 20px 0;
  }
</style>
